<template>
  <div class="app">
    <div class="left">
      <dv-border-box-1 class="facility_data">
        <div class="facility_data_content">
          <div v-for="item in facility_data" :key="item.title" class="facility_data_item">
            <div class="facility_data_count">{{ item.count }}</div>
            <div class="facility_data_bottom">
              <div class="border" :style="`background:${item.color}`" />
              <span class="title">{{ item.title }}</span>
            </div>
          </div>
        </div>
      </dv-border-box-1>
      <dv-border-box-2 class="control_data">
        <div class="control_data_content">
          <div class="header">
            <div class="activeTitle">故障设备监控</div>
            <span class="line">|</span>
            <div class="title">异常设备监控</div>
          </div>
          <div class="header_title">
            <div class="header_title_item">故障时间</div>
            <div class="header_title_item">设备地址</div>
            <div class="header_title_item">异常代码</div>
          </div>
          <div class="content" ref="content">
            <div class="content_container" ref="contentContainer">
              <div v-for="(item, index) in control_data" :key="index" class="content_item_container">
                <div class="content_item">{{ item.time }}</div>
                <div class="content_item">{{ item.address }}</div>
                <div class="content_item">{{ item.errorCode }}</div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-2>
      <dv-border-box-3 class="distribute_data">
        <div class="title">点位分布统计</div>
        <div>
          <div id="distribute"></div>
          <div></div>
        </div>
      </dv-border-box-3>
    </div>
    <div class="center">
      <dv-border-box-4 class="total_data">
        <div id="total"></div>
      </dv-border-box-4>

    </div>
    <div class="right">
      <dv-border-box-5 class="progress_data">
        <div class="progress_container">
          <div id="progress"></div>
          <span class="progress_text">75%</span>
        </div>
      </dv-border-box-5>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      facility_data: [
        {
          title: '设备总数',
          count: '2,190',
          color: 'blue'
        }, {
          title: '季度新增',
          count: '190',
          color: '#9cc144'
        }, {
          title: '运营设备',
          count: '3,001',
          color: '#9cc144'
        }, {
          title: '异常设备',
          count: '108',
          color: 'red'
        }
      ],
      control_data: new Array(30).fill({
        time: '20180701',
        address: '北京金萨卡大家阿拉斯加看到',
        errorCode: '100001'
      }),
      scrollTop: 0
    }
  },
  mounted() {
    setInterval(() => {
      const parentHeight = this.$refs.content?.offsetHeight || 0
      const innerHeight = this.$refs.contentContainer?.offsetHeight || 0
      console.log(parentHeight, innerHeight)
      if (this.scrollTop > innerHeight - parentHeight) {
        this.scrollTop = 0
      } else {
        this.scrollTop += 10
      }

      this.$refs.contentContainer && (this.$refs.contentContainer.style.top = -this.scrollTop + 'px')
    }, 500)
    this.initDistribute()
    this.initProgress()
    this.initTotal()
  },
  methods: {
    initTotal() {
      const totalEcharts = echarts.init(document.getElementById('total'))
      totalEcharts.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          }
        ]
      })
    },
    initDistribute() {
      const distributeEcharts = echarts.init(document.getElementById('distribute'))
      distributeEcharts.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '地区',
            type: 'pie',
            radius: [10, 70],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              // borderRadius: 5
            },
            data: [
              { value: 30, name: '湖北' },
              { value: 28, name: '云南' },
              { value: 26, name: '山东' },
              { value: 24, name: '山西' },
              { value: 22, name: '河北' },
              { value: 20, name: '河南' },
              { value: 18, name: '湖南' },
              { value: 16, name: '浙江' }
            ]
          }
        ]
      })
    },
    initProgress() {
      const progressEcharts = echarts.init(document.getElementById('progress'))
      progressEcharts.setOption({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            // adjust the start angle
            startAngle: 180,
            label: {
              show: false
            },
            data: [
              { value: 75, name: '完成', itemStyle: { color: '#232436' } },
              { value: 25, name: '未完成', itemStyle: { color: '#6092e2' } },
              {
                // make an record to fill the bottom 50%
                value: 100,
                itemStyle: {
                  // stop the chart from rendering this piece
                  color: 'none',
                  decal: {
                    symbol: 'none'
                  }
                },
                label: {
                  show: false
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0;
}

.app {
  min-height: 100vh;
  width: 100vw;
  background-color: #06091c;
  display: flex;
  flex-direction: row;
}

.left {
  width: vw(640);

  .facility_data {
    height: vw(200);

    .facility_data_content {
      display: flex;
      width: 100%;
      align-items: center;
      height: 100%;
      padding: 0 vw(30);
      box-sizing: border-box;
    }

  }

  .control_data {
    height: vw(560);

    .control_data_content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: vw(100);

        .activeTitle {
          color: #fff;
          font-size: vw(26);
          margin-left: vw(40);
        }

        .line {
          margin: 0 vw(30);
          color: #6cd4df;
          font-size: vw(36);
        }

        .title {
          color: #2a438c;
          font-size: vw(26);
        }
      }

      .header_title {
        width: 96%;
        margin-left: 2%;
        padding-left: vw(38);
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #232436;
        height: vw(40);

        .header_title_item {
          text-align: left;
          flex: 1;
          color: #6092e2;
        }
      }

      .content {
        flex: 1;
        width: 96%;
        margin-left: 2%;
        padding-left: vw(38);
        box-sizing: border-box;
        position: relative;
        overflow: hidden;

        .content_container {
          position: absolute;
          top: 0;
          left: vw(38);
          transition: 0.5s;
        }

        .content_item_container {
          height: vw(40);
          display: flex;
          flex-direction: row;
          align-items: center;

          .content_item {
            flex: 1;
            text-align: left;
            color: #2a438c;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .distribute_data {
    height: vw(500);

    .title {
      height: vw(100);
      color: #fff;
      padding-left: vw(40);
      line-height: vw(100);
    }

    #distribute {
      width: vw(400);
      height: vw(300);
    }
  }
}

.facility_data_item {
  flex: 1;

  .facility_data_count {
    color: #fff;
    font-size: vw(36);
  }

  .facility_data_bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .border {
    width: vw(10);
    height: vw(20);
    border-radius: vw(5);
  }

  .title {
    margin-left: vw(20);
    color: #6092e2;
    font-size: vw(24);
  }
}

.center {
  width: vw(640);

  .total_data {
    height: vw(500);

    #total {
      height: vw(400);
      width: vw(500);
    }
  }
}

.right {
  width: vw(640);

  .progress_data {
    height: vw(500);

    .progress_container {
      position: relative;

      .progress_text {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }

    #progress {
      height: vw(400);
    }
  }
}
</style>
